<template>
    <div class="app-main-box">
        <mu-card>
            <mu-card-header
                title="SunnyHaroro"
                sub-title="开发者"
            >
                <mu-avatar
                    slot="avatar"
                    text-color="white"
                    color="green"
                >
                    Vue
                </mu-avatar>
            </mu-card-header>
            <mu-card-media
                title="TimeCaps"
                sub-title="TimeCaps"
            >
                <img :src="require('@/assets/img/book-poster.png')">
            </mu-card-media>
            <mu-card-title
                title="时间胶囊"
                sub-title="2018-12-07"
            ></mu-card-title>
            <mu-card-text>
                正在开发中的项目，如果任何显示异常请联系hutao-haroro@qq.com。
            </mu-card-text>
        </mu-card>
        <!-- <svg class="lds-message" width="375px" height="375px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
            <g transform="translate(20 50)">
                <circle cx="0" cy="0" r="7" fill="#e15b64" transform="scale(1 1)">
                    <animateTransform attributeName="transform" type="scale" begin="-0.3s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>
                </circle>
            </g>
            <g transform="translate(40 50)">
                <circle cx="0" cy="0" r="7" fill="#f47e60" transform="scale(0.75 0.75)">
                    <animateTransform attributeName="transform" type="scale" begin="-0.2s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>
                </circle>
            </g>
            <g transform="translate(60 50)">
                <circle cx="0" cy="0" r="7" fill="#f8b26a" transform="scale(0.5 0.5)">
                    <animateTransform attributeName="transform" type="scale" begin="-0.1s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>
                </circle>
            </g>
            <g transform="translate(80 50)">
                <circle cx="0" cy="0" r="7" fill="#abbd81" transform="scale(0 0)">
                    <animateTransform attributeName="transform" type="scale" begin="0s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>
                </circle>
            </g>
        </svg> -->
    </div>
</template>
<script>
export default {
    data () {
        return {}
    },
    created () {

    },
    methods: {

    }
};
</script>
<style lang="less" scoped>
@import "./../assets/css/style.less";

.app-main-box {
    width: 100vw;
    min-height: 100vh;
    background: #16254a;
}
</style>
